<template>
	<div class="container">
		<navigationBar title="我的优惠券"></navigationBar>
		<div class="content" :style="'padding-top: ' + (navigationBarHeight-1) + 'px;'">
			<div class="purpose-list">
				<div class="purpose-item" v-for="(item,index) in list" :key="index">
					<div class="purpose-content">
						<div class="price">
							{{item.couponAmount}}
						</div>
						<div class="business">
							<image :src="item.avatar" mode=""></image>
							<span>{{item.merchantNickname }}</span>
						</div>
					</div>
					<div class="purpose-title">优惠券（凭此券消费减免）</div>
					<div class="location">
						<p>手机号码</p>
						<p>{{item.phone}}</p>
					</div>
				</div>
			</div>

			<!-- <div class="purpose-list">
				<div class="purpose-item">
					<div class="purpose-content">
						<div class="price">
							5
						</div>
						<div class="business">
							<image src="/static/icon/icon_bofang.png" mode=""></image>
							<span>商家名称</span>
						</div>
					</div>
					<div class="purpose-title">凭此券指定商品使用</div>
					<div class="location">
						<p>广东金和定制</p>
						<p>13000000</p>
					</div>
				</div>
		</div> -->
		</div>

	</div>
</template>

<script>
	import data from '@/js/my/purpose/data.js';
	import methods from '@/js/my/purpose/methods.js';
	import {
		mapState
	} from 'vuex';
	import navigationBar from '../../components/navigationBar.vue';
	export default {
		data,
		methods,
		onLoad() {
			// this.getPageData()
		},
		onShow() {
			this.getPageList()

		},
		onReachBottom() {
			this.getPageList()
		},
		onHide() {},
		components: {
			navigationBar
		},
		computed: {
			...mapState(['navigationBarHeight'])
		}
	};
</script>
<style>
	page,
	uni-page {
		background-color: #FAFAFA !important;
	}
</style>
<style scoped lang="scss">
	@import '~@/style/my/purpose.scss';

	.text {
		font-size: $f30;
		line-height: 42upx;
		color: #000;
		margin-top: 50upx;
	}
</style>